---
import { Image } from 'astro:assets';
import CodingInPublic from './CodingInPublic.png';
import { LinkButton } from '@astrojs/starlight/components';

const offerUrl = 'https://learnastro.dev?code=ASTRO_HOLIDAY_PROMO';

const idCount = (((Astro.locals as any)._ad_render_id as number | undefined) ??= 1);
(Astro.locals as any)._ad_render_id++;
const headingId = `learn-astro-course-${idCount}`;
---

<div class="container" lang="en" dir="ltr" data-algolia-exclude>
	<aside aria-labelledby={headingId}>
		<Image src={CodingInPublic} alt="" width="130" />
		<h2 id={headingId}>Learn Astro with <strong>Coding in Public</strong></h2>
		<p class="sl-flex">
			<span class="sl-flex" style="gap: 0.25rem; align-items: center;">
				<svg fill="currentColor" viewBox="0 0 18 18" aria-hidden="true">
					<path
						d="M12 7.7 8.25 5.53A1.5 1.5 0 0 0 6 6.83v4.34a1.5 1.5 0 0 0 2.25 1.3L12 10.3a1.5 1.5 0 0 0 0-2.6ZM11.25 9 7.5 11.17V6.83L11.25 9ZM9 1.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM9 15A6 6 0 1 1 9 3a6 6 0 0 1 0 12Z"
					></path>
				</svg>
				<span>150+ video lessons</span>
			</span>
			<span>•</span>
			<span>Astro v5 ready</span>
		</p>
		<LinkButton href={offerUrl} class="cta" data-learn-astro-cta>
			<span>Black Friday! Get <strong>33% off</strong></span>
		</LinkButton>
	</aside>
</div>

<script>
	document.querySelectorAll('a[data-learn-astro-cta]').forEach((link) =>
		link.addEventListener('click', () => {
			(window as any).fathom?.trackEvent('Docs: Coding in Public campaign click');
		})
	);
</script>

<style>
	.container {
		container-type: inline-size;
		max-width: 45rem;
		margin-inline: auto;
	}
	aside {
		margin-top: 2rem;
		border: 1px solid var(--sl-color-purple);
		border-radius: 0.5rem;
		padding: 1rem;
		background-color: var(--sl-color-gray-6);
		box-shadow: var(--sl-shadow-md);

		/* Internal layout */
		display: grid;
		grid-template-columns: 4rem 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			'image title'
			'tagline tagline'
			'cta cta';
		gap: 0.75rem 0.5rem;
		align-items: center;
	}

	img {
		grid-area: image;
		width: 100%;
		height: auto;
		margin: -0.25rem;
	}

	h2 {
		grid-area: title;
		font-weight: 400 !important;
		line-height: var(--sl-line-height-headings);
		text-wrap: balance;
	}

	p {
		grid-area: tagline;
		flex-wrap: wrap;
		font-size: var(--sl-text-2xs);
		column-gap: 0.25rem;
		justify-content: center;
		align-items: center;
		line-height: var(--sl-line-height-headings);
	}

	svg {
		width: 1.5em;
		height: 1.5em;
	}

	.cta {
		grid-area: cta;
		text-align: center;
		text-wrap: balance;
		justify-content: center;
		font-size: var(--sl-text-sm) !important;
		font-weight: 500;
		padding-block: 0.6875rem !important;
		transition: opacity 200ms ease-out;
	}
	.cta:hover {
		opacity: 0.8;
	}
	.cta strong {
		text-transform: uppercase;
	}

	/* When there’s room, tuck the tagline in under the title to the right of the image. */
	@container (width > 24rem) {
		aside {
			row-gap: 0.25rem;
			grid-template-areas:
				'image title'
				'image tagline'
				'cta cta';
		}
		.cta {
			margin-top: 0.5rem;
		}
		p {
			justify-content: start;
		}
	}
	/* When there’s even more room, move the CTA button to the right instead of below. */
	@container (width > 40rem) {
		aside {
			grid-template-columns: 4rem auto auto;
			grid-template-areas:
				'image title cta'
				'image tagline cta';
		}
		.cta {
			margin-top: 0;
		}
	}
</style>
